import getWindowWidth from 'tf-utils/dom/getWindowWidth';
import getWindowHeight from 'tf-utils/dom/getWindowHeight';
import getImgResponsivePos from 'tf-utils/dom/getImgResponsivePos';

//初始化的边距，主要配合getImgZoomSmall使用，即图片的默认展示位置需要跟四周留有空间
const initPaddingH=100;
const initPaddingV=100;
//每次缩放30px
const step=30;

class ImageViewer extends React.Component {
    //坐标变量
    imgLeft = 0;
    imgTop=0;
    imgWidth=0;
    imgHeight=0;
    winWidth=0;
    winHeight=0;

    //元素引用
    imgWrap=null;
    imgPreview=null;

    static propTypes = {
        src:React.PropTypes.string.isRequired
    };

    constructor(props){
        super(props);

        //绑定事件作用域
        this.mouseWheel=this.mouseWheel.bind(this);
        this.mouseDown=this.mouseDown.bind(this);
        this.mouseMove=this.mouseMove.bind(this);
        this.mouseUp=this.mouseUp.bind(this);
        this.close=this.close.bind(this);
    }

    /**
     * 设置图片的初始坐标相关参数
     * @param imgWidth
     * @param imgHeight
     */
    setInitImgPosition(imgWidth, imgHeight){
        //获取当前窗体高宽
        this.winWidth=getWindowWidth();
        this.winHeight=getWindowHeight();
        const pos = getImgResponsivePos(this.winWidth-2*initPaddingH, this.winHeight-2*initPaddingV, imgWidth, imgHeight);
        this.imgLeft=initPaddingH+pos.left;
        this.imgTop=initPaddingV+pos.top;
        this.imgWidth=pos.width;
        this.imgHeight=pos.height;
    }

    open(){
        //隐藏网页滚动条
        document.body.style.overflow='hidden';

        //最外层
        const imgPreview=document.createElement('div');
        imgPreview.style.cssText='position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;z-index:9999';

        //包裹图片层
        const imgWrap=document.createElement('div');

        //图片
        const img=document.createElement('img');
        img.src=this.props.src;
        img.draggable=false; //禁止图片默认拖拽行为
        img.style.cssText='width:100%;height:100%;';
        img.onload=() => {
            //图片加载完后才能获取到其高度和宽度
            this.setInitImgPosition(img.naturalWidth, img.naturalHeight);
            imgWrap.style.left=this.imgLeft+'px';
            imgWrap.style.top=this.imgTop+'px';
            imgWrap.style.width=this.imgWidth+'px';
            imgWrap.style.height=this.imgHeight+'px';
        };
        imgWrap.style.cssText='position:absolute;cursor:move';
        imgWrap.addEventListener('mousewheel', this.mouseWheel, false);//FF:DOMMouseWheel
        imgWrap.addEventListener('mousedown', this.mouseDown, false);
        imgWrap.addEventListener('mousemove', this.mouseMove, false);
        imgWrap.addEventListener('mouseup', this.mouseUp, false);
        imgWrap.appendChild(img);
        this.imgWrap=imgWrap;

        //关闭按钮
        const btnClose=document.createElement('a');
        btnClose.href='javascript:;';
        btnClose.title='关闭';
        btnClose.innerHTML='&times;';
        btnClose.style.cssText='position:absolute;width:30px;height:30px;line-height:30px;font-size:24px;text-align:center;right:-15px;top:-15px;background:rgba(0,0,0,.5);color:white;border-radius:50%;';
        btnClose.addEventListener('click', this.close, false);
        imgWrap.appendChild(btnClose);

        imgPreview.appendChild(imgWrap);

        document.body.appendChild(imgPreview);

        this.imgPreview=imgPreview;
    }

    close(e){
        //还原网页滚动条
        document.body.style.overflow='';

        this.imgWrap.removeEventListener('mousewheel', this.mouseWheel, false);
        this.imgWrap.removeEventListener('mousedown', this.mouseDown, false);
        this.imgWrap.removeEventListener('mousemove', this.mouseMove, false);
        this.imgWrap.removeEventListener('mouseup', this.mouseUp, false);
        e.target.removeEventListener('click', this.close, false);

        document.body.removeChild(this.imgPreview);
    }

    mouseWheel(e){
        e.stopPropagation();
        //每次宽度的缩放值
        const scale=step*e.wheelDelta/120; //FF:e.delta=-+3,符号相反

        //记录当前鼠标在图片上的坐标（百分比）
        const x=e.offsetX;
        const y=e.offsetY;
        const xPercent=x/this.imgWidth;
        const yPercent=y/this.imgHeight;

        //计算新的高宽
        const width=this.imgWidth+scale; //缩放宽度
        const height=width*this.imgHeight/this.imgWidth; //高度跟着缩放

        //高或宽不能小于100，且不能都大于窗体高宽
        if(width>=100&&height>=100&&(width<this.winWidth||height<this.winHeight)) {
            //计算新的偏移量
            const left = this.imgLeft - (width * xPercent - x);
            const top = this.imgTop - (height * yPercent - y);

            this.imgWrap.style.left = left + 'px';
            this.imgWrap.style.top = top + 'px';
            this.imgWrap.style.width = width + 'px';
            this.imgWrap.style.height = height + 'px';
            this.imgWidth = width;
            this.imgHeight = height;
            this.imgLeft = left;
            this.imgTop = top;
        }
    }

    mouseDown(e){
        if(e.button==0) { //点击左键
            this.isMouseDown = true;
            //计算当前点与图片的位移差
            this.deltaX = e.clientX - this.imgLeft;
            this.deltaY = e.clientY - this.imgTop;
        }
    }

    mouseMove(e){
        if(this.isMouseDown) {
            this.imgLeft=e.clientX - this.deltaX;
            this.imgTop=e.clientY - this.deltaY;
            this.imgWrap.style.left = this.imgLeft + 'px';
            this.imgWrap.style.top = this.imgTop + 'px';
        }
    }

    mouseUp(){
        this.isMouseDown=false;
    }

    render(){
        return (
            <a href="javascript:;" onClick={this.open.bind(this)}>
                {this.props.children}
            </a>
        )
    }
}

export default ImageViewer;